<template>
  <div class="distributors-baseInfo">
    <div class="baseInfo">
      <el-form
        class="form-detail"
        label-position="right"
        label-width="140px"
        inline
        :model="distributorInfo"
      >
        <el-form-item
          label="申请编号："
          style="width: 33.3333%"
        >
          <div>{{ distributorInfo?.distributeApplyNo || '无' }}</div>
        </el-form-item>
        <el-form-item
          label="配送商名称："
          style="width: 33.3333%"
        >
          <div>{{ distributorInfo?.distributeName || '无' }}</div>
        </el-form-item>
        <el-form-item
          label="企业所在地区："
          style="width: 33.3333%"
        >
          <div>
            <span v-if="distributorInfo?.provinceName">{{ distributorInfo.provinceName }}</span>
            <span v-if="distributorInfo?.cityName"> / {{ distributorInfo.cityName }}</span>
            <span v-if="distributorInfo?.areaName"> / {{ distributorInfo.areaName }}</span>
          </div>
        </el-form-item>
        <el-form-item
          label="详细地址："
          style="width: 33.3333%"
        >
          <div>{{ distributorInfo?.address || '无' }}</div>
        </el-form-item>
        <el-form-item
          label="联系人："
          style="width: 33.3333%"
        >
          <div>{{ distributorInfo?.contactsName || '无' }}</div>
        </el-form-item>
        <el-form-item
          label="联系电话："
          style="width: 33.3333%"
        >
          <div>{{ distributorInfo?.contactsPhone || '无' }}</div>
        </el-form-item>
        <el-form-item
          label="配送产品："
          style="width: 33.3333%"
        >
          <my-tooltip
            :content="getProductName(distributorInfo)"
            :is-link="false"
          />
        </el-form-item>
        <el-form-item
          label="配送地区："
          style="width: 33.3333%"
        >
          <area-list-view :areas="distributorInfo?.region" />
        </el-form-item>
        <el-form-item
          label="其他信息："
          style="width: 33.3333%"
        >
          <div>{{ distributorInfo?.otherInfo || '无' }}</div>
        </el-form-item>
        <el-form-item
          label="创建人："
          style="width: 33.3333%"
        >
          <div>{{ distributorInfo?.creatorName || '无' }}</div>
        </el-form-item>
        <el-form-item
          label="创建时间："
          style="width: 33.3333%"
        >
          <div>{{ dateFormat('yyyy-mm-dd HH:MM', distributorInfo?.createdAt) || '无' }}</div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs } from 'vue'

export default defineComponent({
  props: {
    detail: {
      type: Object,
      default: () => {},
    },
  },
  setup(props, context) {
    var reactiveData = reactive({
      distributorInfo: props.detail,
    })

    return {
      ...toRefs(reactiveData),
    }
  },
})
</script>

<style lang="scss" scoped>
.certList {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}
</style>

